import React, { Component } from "react";
// 引入prop-types，用于做props的类型检查
// import PropTypes from "prop-types";
import {
  string,
  number,
  array,
  bool,
  func,
  object,
  oneOf,
  oneOfType,
} from "prop-types";

class Child1 extends Component {
  static propTypes = {
    // isRequired表示必填
    name: string.isRequired,
    count: number,
    likes: array,
    show: bool,
    optionalFunc: func,
    optionalObject: object,
    // 必须是这两个值的其中一个
    optionalEnum: oneOf(["News", "Photos"]),
    optionalUnion: oneOfType([string, number]),
  };
  render() {
    return (
      <>
        <div>child1组件</div>
        <div>name: {this.props.name}</div>
        <div>count: {this.props.count}</div>
      </>
    );
  }
}
// Child1.propTypes = {
//   name: PropTypes.string,
//   count: PropTypes.number,
//   likes: PropTypes.array,
//   show: PropTypes.bool,
// };

class App extends Component {
  render() {
    return (
      <>
        <h2>props的数据类型</h2>
        {/* 传递的不是字符串，需要加大括号 */}
        <Child1 name="zhangsan" count={5} likes={["唱", "跳"]} show={true} />
      </>
    );
  }
}

export default App;
